import { computed, defineComponent, ref } from 'vue';
import Basic from './Basic.vue';
import HeaderPicture from './HeaderPicture.vue';
import Menu from './Menu.vue';
import MenuSeamless from './MenuSeamless.vue';
import MiniClickEvent from './MiniClickEvent.vue';
import MiniMouseEvents from './MiniMouseEvents.vue';
import MiniSlot from './MiniSlot.vue';
import MiniToOverlay from './MiniToOverlay.vue';
import OverlayMode from './OverlayMode.vue';

export default defineComponent({
  name: 'App',
  props: {},
  emits: [],

  setup(props, { attrs, emit, expose, slots }) {
    expose({});

    return () => {
      return (
        <div class='block'>
          <div class='block-'>
            <h5 class='title'>Basic</h5>
            <Basic />
          </div>
          <div class='block-'>
            <h5 class='title'>HeaderPicture</h5>
            <HeaderPicture />
          </div>
          <div class='block-'>
            <h5 class='title'>Menu</h5>
            <Menu />
          </div>
          <div class='block-'>
            <h5 class='title'>MenuSeamless</h5>
            <MenuSeamless />
          </div>
          <div class='block-'>
            <h5 class='title'>MiniClickEvent</h5>
            <MiniClickEvent />
          </div>
          <div class='block-'>
            <h5 class='title'>MiniMouseEvents</h5>
            <MiniMouseEvents />
          </div>
          <div class='block-'>
            <h5 class='title'>MiniSlot</h5>
            <MiniSlot />
          </div>
          <div class='block-'>
            <h5 class='title'>MiniToOverlay</h5>
            <MiniToOverlay />
          </div>
          <div class='block-'>
            <h5 class='title'>OverlayMode</h5>
            <OverlayMode />
          </div>
        </div>
      );
    };
  },
});
